import React from "react";
import './app.scss';
import {Markdown} from "../markdown/Markdown";
import {useEffect, useState} from "react";
import {processMdcString} from "../mdc/processMdcString";

// import Markdown from 'react-markdown';

// import text from '../markdown/demo.md';
// console.log('text',text)


export const App: React.FC<{}> = () => {
    const [markdown, setMarkdown] = useState(null as any);
    // const onClick = async () => {
    //
    //     const demo = (await import('../markdown/demo')).default;
    //     //变量为函数时
    //     setPage(() =>{
    //         return demo
    //     })
    // };

    useEffect(() => {

        (async () => {
                //import函数来实现懒加载 动态引入
                const demo = (await import('../markdown/demo.md')).default;
                processMdcString(demo)
                //变量为函数时
                setMarkdown(() => {
                    return demo
                })
            }

        )()
    //    这里的deps指的是props那边传参数的约束条件，如果没有约束条件就写个空数组即可，
    }, []);


    return (
        <div>
            <Markdown md={markdown}/>
        </div>
    )
};
